<template>
  <div class="video-stream">
    <video 
      ref="videoElement" 
      autoplay 
      playsinline 
      referrerpolicy="no-referrer"
    ></video>
    <div class="stream-status">
      <i :class="['fas', statusIcon]"></i>
      <span>{{ statusText }}</span>
    </div>
  </div>
</template>

<script>
import { ref, watch, onUnmounted } from 'vue';

export default {
  props: {
    stream: {
      type: MediaStream,
      default: null
    }
  },
  
  setup(props) {
    const videoElement = ref(null);
    const statusIcon = ref('fa-video');
    const statusText = ref('未连接');
    
    // 监听流变化
    watch(() => props.stream, (newStream) => {
      if (newStream) {
        // 设置视频元素
        if (videoElement.value) {
          videoElement.value.srcObject = newStream;
          videoElement.value.play().catch(e => console.log('自动播放限制:', e));
        }
        
        // 更新状态
        statusIcon.value = 'fa-video';
        statusText.value = '视频已连接';
        
        // 获取分辨率信息
        if (newStream.getVideoTracks().length > 0) {
          const track = newStream.getVideoTracks()[0];
          const settings = track.getSettings();
          
          if (settings.width && settings.height) {
            statusText.value = `${settings.width}×${settings.height}`;
          }
        }
      } else {
        // 清理资源
        if (videoElement.value) {
          videoElement.value.srcObject = null;
        }
        
        // 更新状态
        statusIcon.value = 'fa-video-slash';
        statusText.value = '视频已断开';
      }
    }, { immediate: true });
    
    // 清理资源
    onUnmounted(() => {
      if (videoElement.value) {
        videoElement.value.srcObject = null;
      }
    });
    
    return {
      videoElement,
      statusIcon,
      statusText
    };
  }
};
</script>

<style scoped>
.video-stream {
  position: relative;
  height: 150px;
  background: #0d1117;
  border-radius: 8px;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stream-status {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #a0aec0;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .video-stream {
    height: 120px;
  }
}
</style>